<template>
<div class="jd-detail">
    <Navbabbar :title="list.name"/>
  <div class='info'>
    <img :src='$img.imgBase+list.img'>
    <div v-text="list.name"></div>
    <div class="pig">
        <span>$</span><b  v-text="list.price"></b>
    </div>
  </div>


    <!-- 加入购物车开始 -->
    <van-goods-action>
    <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
    <van-goods-action-icon icon="cart-o" text="购物车" />
    <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
    <van-goods-action-button type="warning" text="加入购物车" @click="pushcart" />
    <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    

</div>
    
</template>
<script>
import { Navbabbar,} from '@/components/';
import {fetchgooddetail} from '@/utils/api'

import {GoodsAction, GoodsActionIcon, GoodsActionButton} from 'vant'

export default {
    data(){
        return{
            list:{}
        }

    },
    components:{
        [GoodsAction.name]:GoodsAction,
        [GoodsActionIcon.name]:GoodsActionIcon,
        [GoodsActionButton.name]:GoodsActionButton,
        Navbabbar
    },
    mounted(){
        this.inif()
        
       
    },
    methods:{
        pushcart(){
            const bool =  localStorage.getItem('token')
            if(!bool){
                this.$router.push('/logion')

            }else{
                const id = this.list._id
                this.$http.fetchaddcartr({id}).then(res=>{
                    console.log(res);
                    this.$router.push('/cart')

                })

                console.log("加入购物车");
            }
            // 先判断登陆没有。没有登陆就跳转到登录页
            
        },
        inif(){
            const id = this.$route.params.id
            fetchgooddetail({id}).then(res=>{
                console.log(this.$route.params.id);
                console.log(res);
                this.list = res
                console.log(this.list);
            })
        }
    },
    
    
}
</script>
<style lang="scss" scoped>
.jd-detail{
    padding-top: 1.33rem;
  .info {
    font-size: .4rem;
    img {
      display: block;
      width: 9.33rem;
      height: 9.33rem;
      margin: 0 auto;
    }
    .pig{
        font-size: 0.667rem;
        color: red;
    }
  }

}

</style>